<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>商品分类</span>
      <el-button
        style="float: right; padding: 10px 15px"
        type="primary"
        @click="addtype"
        >添加分类</el-button
      >
    </div>
    <el-table :data="dataList">
      <el-table-column type="index" label="序号" width="120"></el-table-column>
      <el-table-column prop="cateName" label="分类名称">
        <template slot-scope="data">
          <label v-show="!data.row.isedit">{{ data.row.cateName }}</label>
          <el-input
            v-show="data.row.isedit"
            v-model="data.row.cateName"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="是否启用">
        <template slot-scope="data">
          <el-switch
            v-model="data.row.state"
            active-color="#FF9999"
            inactive-color="#666699"
            :disabled="!data.row.isedit"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-show="!scope.row.isedit"
            type="primary"
            @click="cliedit(scope.row)"
            >编辑</el-button
          >
          <el-button
            v-show="scope.row.isedit"
            type="success"
            style="margin: 0"
            @click="cliok(scope.row)"
            >完成</el-button
          >
          <el-button type="danger" @click="clidel(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="currentPage"
        :page-sizes="pagesizes"
        :page-size="pagesize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 修改模态框 -->
    <el-dialog title="添加分类" :visible.sync="dialog" width="35%">
      <div class="mb30">
        <span>分类名称</span>
        <el-input v-model="edittype" autocomplete="off"></el-input>
      </div>
      <div>
        <span>是否启用</span>
        <el-switch
          v-model="state"
          active-color="#FF9999"
          inactive-color="#666699"
        >
        </el-switch>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="clickEditOk">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
import { gettype, typeadd, deltype, editcate } from "@/apis/item";
export default {
  data() {
    return {
      dataList: [],
      currentPage: 1,
      pagesizes: [5, 10, 15, 20],
      pagesize: 5,
      total: 0,
      dialog: false,
      edittype: "",
      state: true,
    };
  },

  methods: {
    //获取分类列表
    getlist() {
      gettype({ currentPage: this.currentPage, pageSize: this.pagesize }).then(
        (res) => {
          console.log(res);
          for (const obj of res.data.data) {
            obj.state = obj.state == 1;
            obj.isedit = false;
          }
          this.dataList = res.data.data;
          this.total = res.data.total;
        }
      );
    },
    //分页功能
    sizechange(newsize) {
      this.pagesize = newsize;
      this.getlist();
    },
    pagechange(newpage) {
      this.currentPage = newpage;
      this.getlist();
    },

    //添加分类弹框
    addtype() {
      this.dialog = true;
    },

    //确认保存
    clickEditOk() {
      if (this.edittype == "") {
        this.$message({
          type: "warning",
          message: "请输入分类名称!",
          center: true,
        });
      } else {
        typeadd({ cateName: this.edittype, state: this.state }).then((res) => {
          console.log(res);
          if (res.data.code == 0) {
            this.$message({
              type: "success",
              message: "添加分类成功!",
              center: true,
            });
            this.dialog = false;
            this.getlist();
          }
        });
      }
    },

    //删除功能
    clidel(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deltype({ id: row }).then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "系统提示:分类删除成功!",
                type: "success",
                center: true,
              });
            }
            this.getlist();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //点击编辑显示输入框
    cliedit(row) {
      row.isedit = true;
    },

    //点击完成发送请求
    cliok(row) {
      row.isedit = false;
      editcate({
        id: row.id,
        cateName: row.cateName,
        state: row.state,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: "系统提示:分类修改成功!",
            type: "success",
            center: true,
          });
        }
      });
    },
  },
  created() {
    this.getlist();
  },
};
</script>

<style lang="less" scoped>
.block {
  margin-top: 20px;
}
.el-dialog {
  padding: 20px;
  div {
    width: 100%;
    display: flex;
    align-items: center;
    span {
      padding: 0;
      width: 80px;
    }
    .rl-input {
      width: 100%;
    }
  }
  .dialog-footer {
    justify-content: flex-end;
  }
}
</style>